<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box
        }
        div{
            border: 0px solid black;
            margin: 0px;
            text-align: center;
            box-sizing: border-box;
            
        }
        .row{
            width: 100%;
            float: center;
            
        }
       .col-md-3 {
            width: 25%;
       }
       .col-md-n {
            width: 23%;
       }
        .头{
            height: 70px;
            background-color: rgb(82, 16, 78);
            margin: 0px;
            position: fixed;
            z-index: 100;
            width: 100%;
            display: inline-block;
            padding-top: 10px;
        }
        .头 div{
            display: inline-block;
        }
        #帅{
            
            font-size: 30px;
            color: rgb(252, 16, 181);
            width: 30%;
            border: px solid red;
            display: inline-block;
            float: left;9
            }
       .按键{
            float: right;
            width: 100px;
            height: 50px;
            font-size: 30px;
            background-color: rgb(82, 16, 78);
            border: 0px;
            float: right;
            margin-right: 30px;
        }
        .查找{
            text-align: center;
            float: center;
            border: 0px solid black;
        }
        .查找1{
            margin-left:5px ;
            background-color: rgb(218, 67, 185);
        }
        .长度{font-size: 20px;
            float: center;
            }
       .搜索{
            background: linear-gradient(45deg,#020031,#6d3353);
            background-size: 100%;
            height:500px;
           
           box-sizing: border-box;
        }
        .content{
            overflow: hidden;
            background-color: rgb(238, 238, 238);
        }
        .content div{
            /*float: left;*/
            display: inline-block;
        }
        .左,.右{
            width: 10%;
            background-color:  rgb(238, 238, 238);
        }
        .中{
            width: 79%;
            background-color: white;
            margin: 0px;
            box-sizing: border-box;
            text-align: left;
        }
        #title{
           padding-top: 150px;
            padding-bottom: 120px;
        }
        h1{
            font-size: 100px;
            margin: 0px;
            color: white;
        }
        h2{
            font-size: 30px;
            font-weight: 200;
            margin-top: 30px;
            color: white;
        }
        .内容边距{
            margin-top: 50px;
            margin-bottom: 50px;
        }
        img{
            width: 230px;
            height: 200px;
            box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5);
            
        }
        img:hover{
             opacity:0.4;
             }
        
        td{
            width: 24%;
            padding: 50px;
            border: 0px solid black;
        }
        tr{
            display: block;
            margin: 30px;
        }
        table{
            padding: 0px;
            text-align: center;
            border: 0px solid red;
        }
        
    </style>
</head>
<body>
    <div class="头 ">
        <div class="row">
        <div id="帅" >帅就完事了</div>
        <div class="col-md-3 " >
            <div class="查找">
            <input class="长度" type="text"><input type="submit" value="查找" class="查找1">
            </div>
        </div>
        <div class="col-md-3">
       <input type="submit" value="登陆" class="按键"></div>
        </div>  
    </div>
    <div class="搜索">
        <div id="title">
            <h1 class="g" >潮</h1>
            <h2 class="a">引领世界走进潮流！</h2>
        </div>
    </div>
    <div class="content">
        <div class="左">
        </div>
        <div class="中">
            <table class="row">
            <tr >
                <td >
                    <a href="#"><img src="http://img1.imgtn.bdimg.com/it/u=1290945309,535761112&fm=26&gp=0.jpg" ></a><br>
                    冠军
                </td>
                <td>
                     <img src="3.jpg" >
                     <br>Julius
                </td>
                <td>
                    <img src="4.jpg" >
                    <br>Y-3
                </td>
                <td>
                    <img src="5.jpg">
                    <br>
                    <a href="#">Supreme</a>
                </td>
            </tr>
           
            <tr>
               <td>
                    <img src="6.jpg" >
                    <br>Dickies
                </td>
                <td>
                     <img src="7.jpg" >
                     <br>川久保玲
               </td>
                <td>
                    <img src="8.jpg" >
                    <br>NIKE
                </td>
                <td>
                    <img src="9.jpg">
                    <br>ADIDAS
                </td>
            </tr>
            </table>
        </div>
        <div class="右"></div>
    </div>
    <div class="尾部">
        移动1903陈继新
        </div>
        
</body>
</html>